<template>
    <div>
       <div>{{person}}</div>
       <button @click="addProperty">增加属性</button>
       <button @click="delProperty">删除属性</button>
        <hr>
       <div>{{list}}</div>
       <button @click="pushData">push增加数据</button>
       <button @click="clearAry">清空</button>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    data(){
        return{
            person:{
                name:'Giles',
                age:23
            },
            list:['Giles','Monica','Lucy','Jerry','Jack']
        }
    },
    methods:{
        addProperty(){
            console.log('this',this);
            //this.person.address="万科金域东郡"
            //this.$set(this.person,'address','万科金域东郡')
            //Vue.set(this.person,'address','万科金域东郡')
            
            this.person=Object.assign({},this.person,{address:'汇林华城'})
        },
        delProperty(){
            //这种做法是监听不了的
            //delete this.person.age
            //this.$delete(this.person,"age")
            Vue.delete(this.person,"age")
        },
        pushData(){
            //this.list.push("Marry")
            //this.list[5]="Peter"
            //this.$set(this.list,5,"Sky")
            //Vue.set(this.list,5,"Dora")
            this.list=[...this.list,"Peter"]
        },
        clearAry(){
            //直接操作length监听不了，页面无反应
            //this.list.length=0
            this.list.splice(0)
        }
    },
    watch:{
        list:{
            deep:true,
            handler(newval){
                console.log('数组'+newval);
            }
        },
        person:{
            deep:true,
            handler(newval,oldval){
                console.log(newval,oldval);
            }
        }
    }
}
</script>

<style>

</style>